import React from 'react';
import { Table,Pagination, Message } from 'antd';
import RentRecordModal from './rentRecordModal';
import RefundRecordModal from './refundRecordModal';
import TaxesRecordModal from './taxesRecordModal';
let Detail = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    getInitialState() {
        return {
            dataFinance:[],
            dataRenter:[],
            detailData:{},
            tenementDetail: {},
            tenementId:'',
            paginationFinance: {
                currentPage: 1,
                pageSize: 10
            },
            paginationRenter: {
                currentPage: 1,
                pageSize: 10
            },
            visibleRent:false,
            visibleRefund:false,
            visibleTaxes:false,
        }
    },
    componentDidMount(){ 
        let detailData = this.props.location.state.detailData; 
        let record = this.props.location.state.record; 
        this.setState({
            tenementDetail: detailData,    
            record:record       
        });
        this.handleSearch();
    },
    hideModal(){
      this.setState({
          visibleRent:false,
          visibleRefund:false,
          visibleTaxes:false,
      }) 
      this.handleSearch(); 
    },
    showModalRent(title,record){
      this.setState({
          visibleRent:true,
          record:record
      })
    },
    showModalRefund(title,record){
      this.setState({
          visibleRefund:true,
          record:record
      })
    },
    showModalTaxes(title,record){
      this.setState({
          visibleTaxes:true,
          record:record
      })
    },
    handleSearch() {
        this.setState({
          paginationFinance: {
            currentPage: 1
          },
          paginationRenter: {
            currentPage: 1
          },
        })
        this.fetch();
    },
    handleReset() {
        this.props.form.resetFields();
    },
    fetch() {
        let record = this.props.location.state.record;
        let pageFinance = this.state.paginationFinance;
        let pageRenter = this.state.paginationRenter;
        var tenementId=record.tenementId;
        let paramsFinance = Object.assign({}, { pageSize:10,currentPage:pageFinance.currentPage,tenementId:tenementId})
        let paramsRenter = Object.assign({}, {pageSize:10,currentPage:pageRenter.currentPage,tenementId:tenementId})
        let _me = this;
        Utils.sendAjax({
            url: '/funder/statistics/loanDetail',
            data: JSON.stringify(paramsFinance),
            callback: function (result) {
                if (result.code == '200') {
                    
                    _me.setState({
                        dataFinance: result.data,
                        paginationFinance: result.page
                    })
                }
            }
        })
        Utils.sendAjax({
            url: '/funder/statistics/renterDetail',
            data: JSON.stringify(paramsRenter),
            callback: function (result) {
                if (result.code == '200') {
                    _me.setState({
                        dataRenter: result.data,
                        paginationRenter: result.page
                    })
                }
            }
        })
        
    },
    rowKeyFinance(data) {
        return data.financeId;
    },
    rowKeyRenter(data) {
        return data.rentContractId;
    },

    handleTableChangeFinance(paginationFinance) {
        var me=this;
        const pager = me.state.paginationFinance;
        pager.currentPage = paginationFinance.current;
        me.setState({
            paginationFinance: pager
        });  
        me.fetch();
    },
    handleTableChangeRenter(paginationRenter) {
        var me=this;
        const pager = me.state.paginationRenter;
        pager.currentPage = paginationRenter.current;
        me.setState({
            paginationRenter: pager
        });     
        me.fetch();
    },
    goBack(){
        history.go(-1)
    },
    goTitleHeight(id){
        var HeightDom=document.getElementById(id)
        HeightDom.scrollIntoView(true);
    },

    render() {
        var state=this.state;
        var props=this.props;
        let record = this.props.location.state.record;
        // 业主信息
        let tenementDetail = this.state.tenementDetail;

        const financeType = {
            '101': '收房贷',
            '102': '装修贷',
            '103': '租约贷'
        }  
         const columnsFinance = [{
                title: '申请金额(元)',
                dataIndex: 'applyAmount',
            }, {
                title: '年利率(%)',
                dataIndex: 'interestRate',
            }, {
                title: '放款金额(元)',
                dataIndex: 'amount',
            }, {
                title: '融资类型',
                dataIndex: 'type',
                render:(value)=>{
                  return financeType[value];
                }
            }, {
                title: '融资期限(月)',
                dataIndex: 'period',
            }, {
                title: '还款方式',
                render: (text,record)=> {
                    return (
                        <span>{record.repaymentType == 'installment' ? '等额本息' :
                                         record.repaymentType == 'onetime' ? '一次性还本付息' : 
                                         record.repaymentType == 'month' ? '先息后本'　: '等本金'}</span>
                    )
                }
            }, {
                title: '融资开始时间',
                dataIndex: 'startTime',
            }, {
                title: '融资结束时间',
                dataIndex: 'endTime',
            }, {
                title: '还款情况',
                dataIndex: 'repaymentStatus',
            }, {
                title: '操作',
                dataIndex: 'more',
                key: 'more',
                render: (text, record) => {
                    let params = {
                        financeId: 33,
                    }
                    return (
                        <a href="javascript:;" onClick={this.showModalRefund.bind(this, '还款记录', record) }>查看还款记录</a>
                    )
                }
         }];
         const columnsRenter= [{
                title: '租客姓名',
                dataIndex: 'realName',
            }, {
                title: '身份证号',
                dataIndex: 'cardNo',
            }, {
                title: '联系方式',
                dataIndex: 'mobilePhone',
            }, {
                title: '订金(元)',
                dataIndex: 'reserveAmount',
            }, {
                title: '租金(元/月)',
                dataIndex: 'rent',
            }, {
                title: '付款方式',
                dataIndex: 'repayType',
                render: (text, record) => {
                   return(
                       <span>押{record.depositPeriod}付{record.rentPeriod}</span>
                   )
                 }
            },  {
                title: '租约开始时间',
                dataIndex: 'startTime',
            },  {
                title: '租约结束时间',
                dataIndex: 'endTime',
            },  {
                title: '中介费',
                dataIndex: 'agencyFee',
            },  {
                title: '杂费详情',
                dataIndex: 'feeItem',
            }, {
                title: '操作',
                dataIndex: 'more',
                key: 'more',
                render: (text, record) => {
                    return (
                        <a href="javascript:;" onClick={this.showModalRent.bind(this, '收租记录', record) }>查看收租记录</a>
                    )
                }
         }];
            return (
                <div>
                    <div className="describeCon">
                        <div className="houseInfo">
                            <div className="hd clearfix"><h1 className="fl">详细信息</h1><a href="javascript:;" onClick={this.goBack} className="fr returnLink">&lt; &nbsp; 返回</a></div>
                            <div className="bd"><i></i>房源地址：{record.address}</div>
                        </div>
                        <div className="part ">
                            <h2><a id="ownerInfo">房源信息</a> </h2>
                            <div className="actionBtns" style={{ marginTop: '-40px' ,float:'right'}}>
                                <button className="ant-btn"   onClick={this.showModalTaxes.bind(this, '交租记录', record) }>
                                    查看交租记录
                                </button>
                            </div>
                            <div className="con same">
                             {tenementDetail.paymentWay == '' ? 
                             <table >
                                    <tbody>
                                        <tr>
                                            <td className="odd">业主姓名</td>
                                            <td className="even">{tenementDetail.realName}</td>
                                            <td className="odd">联系方式</td>
                                            <td className="even">{tenementDetail.mobilePhone}</td>
                                            <td className="odd">租金(元/月) </td>
                                            <td className="even">{tenementDetail.rent}</td>
                                        </tr>
                                    </tbody>
                            </table>
                            :
                                <table >
                                    <tbody>
                                        <tr>
                                            <td className="odd">业主姓名</td>
                                            <td className="even">{tenementDetail.realName}</td>
                                            <td className="odd">联系方式</td>
                                            <td className="even">{tenementDetail.mobilePhone}</td>
                                            <td className="odd">租金(元/月) </td>
                                            <td className="even">{tenementDetail.rent}</td>
                                        </tr>
                                        <tr>
                                            <td className="odd">租约期限(月) </td>
                                            <td className="even">{tenementDetail.contractPeriod}个月</td>
                                            <td className="odd">租约开始时间</td>
                                            <td className="even">{tenementDetail.startTime}</td>
                                            <td className="odd">租约结束时间</td>
                                            <td className="even">{tenementDetail.expireTime}</td>
                                        </tr>
                                        <tr>
                                            <td className="odd">付款方式</td>
                                            <td className="even">{tenementDetail.paymentWay==1?'固定':'不固定'}</td>
                                            <td className="odd">房屋付款周期(月)</td>
                                            <td className="even">{tenementDetail.rentPeriod}</td>
                                            <td className="odd">房屋押金(元) </td>
                                            <td className="even">{tenementDetail.deposit}</td>
                                        </tr>
                                        <tr>
                                            <td className="odd">业主收款渠道</td>
                                            <td className="even">{tenementDetail.collectName}</td>
                                            <td className="odd">收款账号</td>
                                            <td className="even">{tenementDetail.bankAccount}</td>
                                            <td className="odd">开户行</td>
                                            <td className="even">{tenementDetail.bankName}</td>
                                        </tr>
                                    </tbody>
                                </table>
                             }
                            </div>

                        </div>
                                <div className="part ">
                                    <h2><a id="financeInfo">融资信息</a></h2>
                                    <div className="con same">
                                        <Table rowKey={this.rowKeyFinance} columns={columnsFinance}
                                            dataSource={this.state.dataFinance}
                                            onChange={this.handleTableChangeFinance}
                                            pagination={this.state.paginationFinance}/>
                                    </div>
                                </div> 
                                <div className="part ">
                                    <h2><a id="renterInfo">租客信息</a></h2>
                                    <div className="con same">
                                        <Table rowKey={this.rowKeyRenter} columns={columnsRenter} 
                                            dataSource={this.state.dataRenter}
                                            onChange={this.handleTableChangeRenter}
                                            pagination={this.state.paginationRenter}/>
                                    </div>
                                </div>
                    </div>
                    <div className="targetBox" >
                        <a href="javascript:;" className="targetTitle" onClick={this.goTitleHeight.bind(this, 'ownerInfo') } >房源信息</a>
                        <a href="javascript:;" className="targetTitle" onClick={this.goTitleHeight.bind(this, 'financeInfo') } >融资信息</a>
                        <a href="javascript:;" className="targetTitle" onClick={this.goTitleHeight.bind(this, 'renterInfo') } >租客信息</a>
                    </div>
                    { state.visibleRent ? <RentRecordModal   ref="RentRecordModal"   visible={state.visibleRent}   hideModal={this.hideModal}  record={state.record}/> : ''}
                    { state.visibleRefund ? <RefundRecordModal ref="RefundRecordModal" visible={state.visibleRefund} hideModal={this.hideModal} tenementRecord={props.location.state.record} record={state.record}/> : ''}
                    { state.visibleTaxes ? <TaxesRecordModal  ref="TaxesRecordModal"  visible={state.visibleTaxes}  hideModal={this.hideModal}  record={state.record}/> : ''}
             </div>


         )
    }
})
export default Detail